<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px ;width:900px"></div>
    <!-- ECharts单文件引入 -->
    <script src="js/echarts/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'js/echarts/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
				'echarts/theme/macarons', //主题
				'echarts/chart/bar', // 按需加载
				'echarts/chart/scatter', // 按需加载
				'echarts/chart/k', // 按需加载
				'echarts/chart/pie', // 按需加载
				'echarts/chart/radar', // 按需加载
				'echarts/chart/map', // 按需加载
				'echarts/chart/force', // 按需加载
				'echarts/chart/chord', // 按需加载
				'echarts/chart/funnel', // 按需加载
				'echarts/chart/gauge', // 按需加载
				'echarts/chart/eventRiver', // 按需加载
				'echarts/chart/treemap', // 按需加载
				'echarts/chart/venn', // 按需加载
                'echarts/chart/line', // 按需加载
				'echarts/chart/bar' // 按需加载
            ],
            function (ec,theme) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'),theme); 
                
                var option = {
				    title : {
						text: 'dynamic_test',
						subtext: 'Test only'
					},
					tooltip : {
						trigger: 'axis'
					},
					//legend: {
					//	data:['最高','最低']
					//},
					toolbox: {
						show : true,
						feature : {
							mark : {show: true},
							dataZoom : {show: true},
							dataView : {show: true, readOnly: true},
							magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
							restore : {show: true},
							saveAsImage : {show: true}
						}
					},
					calculable : true,
					dataZoom : {
						show : true,
						realtime : true,
						start :60,
						end : 100
					},
					xAxis : [
						{
							type : 'category',
							boundaryGap : true,
							data : (function (){
								var now = new Date();
								var res = [];
								var len = 100;
								while (len--) {
									res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
									now = new Date(now - 2000);
								}
								return res;
							})()
						}
					],
					yAxis : [
						{
							type : 'value',
							scale: true,
							name :'温度',
							boundaryGap: [0.2, 0.2],
							axisLabel : {//单位
								formatter: '{value} °C'
							}
						}
					],
					series : [
						{
							name:'数据',
							type:'line',
							data:function (){
								var list = [];
								var len = 100;
								for (var i = 1; i <= len; i++) {
									list.push((Math.random()*10 + 5).toFixed(1) - 0);
								}
								return list;
							}(),
							 markPoint : {
									data : [
										{type : 'max', name: '最大值'},
										{type : 'min', name: '最小值'}
									]
							},
							markLine : {
								data : [
									{type : 'average', name: '平均值'}
								]
							}
						}
					]
				};
				
				var lastData = 11;
				var axisData;
				var timeTicket;
				clearInterval(timeTicket);
				timeTicket = setInterval (function (){ ////2秒一次跳动
					//lastData += Math.random() * ((Math.round(Math.random() * 10) % 2) == 0 ? 1 : -1);
					//lastData = lastData.toFixed(1) - 0;
					lastData = (Math.random()*10 + 5).toFixed(1) - 0;
					axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
					
					// 动态数据接口 addData
					myChart.addData([
						[
							0,        // 系列索引
							lastData, // 新增数据
							false,    // 新增数据是否从队列头部插入
							false,    // 是否增加队列长度，false则自定删除原有数据
							axisData  // 坐标轴标签
						]
					]);
				}, 2000);
				
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
		
		

		
		
    </script>
</body>